<!--
 * @Description: 生产计划-火箭生产准备计划
 * @Autor: 曹敬涛
 * @Date: 2021-08-16 15:45:18
 * @LastEditors: 商晓彬
 * @LastEditTime: 2022-02-16 11:02:46
-->
<div class="ex-management">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>生产准备计划</span>
                </h3>
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <!-- 查询框 -->
                <div class="query-box">

                    <span class="ui-float-label">
                        <span class="text">装配任务号</span>
                        <input id="input" type="text" name="taskCode" #taskCodeSelect="ngModel" pInputText
                            [(ngModel)]="queryInfo.jobNumber">
                    </span>
                    <span class="ui-float-label quality-dept">
                        <span class="text">型号</span>
                        <p-dropdown name="model" #modelSelect="ngModel" [options]="modelList"
                            [(ngModel)]="queryInfo.model" dataKey="value" (onChange)="modelChangeEv($event.value)"
                            [filter]="true" filterBy="label" [optionLabel]="'label'" placeholder="请选择" required>
                        </p-dropdown>
                    </span>
                    <span class="ui-float-label quality-dept">
                        <span class="text">发次</span>
                        <p-dropdown name="lotNo" #lotNoSelect="ngModel" [options]="lotNoList"
                            [(ngModel)]="queryInfo.lotNo" dataKey="value" [optionLabel]="'label'" placeholder="请选择">
                        </p-dropdown>

                    </span>

                    <p-button label="查询" (click)="getDescList($event)" class="query-btn"></p-button>
                    <p-button type="button" label="重置" (click)="reset()" class="reset-btn"></p-button>
                </div>
                <div>
                    <p-button *ngIf="'Pages.ProductionPlan.newlyAdded' | permission" class="add-btn" (click)="dialogType='生产准备计划新增';addVisible=true;actived=true" label="新增">
                    </p-button>
                    <p-button *ngIf="'Pages.ProductionPlan.Introduce' | permission" class="add-btn" (click)="introduceEv()" label="引入"></p-button>
                    <p-button *ngIf="'Pages.ProductionPlan.StartUp' | permission" class="add-btn" (click)="optionAssignment(1,'确定启动？')" label="启动"></p-button>
                    <button *ngIf="'Pages.ProductionPlan.Complete' | permission" pButton type="button" (click)="optionAssignment(2,'确定完成？')" label="完成"
                        class="ui-button-warning add-btn"></button>
                    <button *ngIf="'Pages.ProductionPlan.Delete' | permission" pButton type="button" (click)="optionAssignment(0,'仅可针对已创建状态的型号任务进行删除，删除后的数据无法恢复，确认删除？')"
                        label="删除" class="ui-button-secondary add-btn"></button>
                </div>
                <!-- 列表 -->
                <div class="row align-items-center" style="margin-top: 25px;">
                    <div class="primeng-datatable-container">
                        <p-table #dataTable [value]="primengTableHelper.records"
                            rows="{{primengTableHelper.defaultRecordsCountPerPage}}" (onLazyLoad)="getDescList($event)"
                            [paginator]="false" [(selection)]="selectedTable" [lazy]="true" [scrollable]="true"
                            [responsive]="primengTableHelper.isResponsive"
                            [resizableColumns]="primengTableHelper.resizableColumns">
                            <ng-template pTemplate="header">
                                <tr>
                                    <th style="width: 80px">
                                        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                    </th>
                                    <th style="width: 150px">操作</th>
                                    <th style="width: 60px">序号</th>
                                    <th style="width: 210px">生产准备计划编号</th>
                                    <th style="width: 210px">装配任务号</th>
                                    <th style="width: 150px">型号</th>
                                    <th style="width: 150px">发次</th>
                                    <th style="width: 150px">产品图号</th>
                                    <th style="width: 150px">产品名称</th>
                                    <th style="width: 150px">准备内容</th>
                                    <th style="width: 150px">计划完成日期</th>
                                    <th style="width: 80px">状态</th>
                                    <th style="width: 150px">负责班组</th>
                                    <th style="width: 150px">负责人</th>
                                    <th style="width: 150px">创建人</th>
                                    <th style="width: 150px">创建时间</th>
                                    <th style="width: 150px">备注</th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-rowIndex="rowIndex" let-car>
                                <tr>
                                    <td style="width: 80px">
                                        <p-tableCheckbox [value]="car"></p-tableCheckbox>
                                    </td>
                                    <td style="width: 150px">
                                        <div class="btn-group dropdown" dropdown container="body">
                                            <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary">
                                                <i class="fa fa-cog"></i><span class="caret"></span> 操作
                                            </button>
                                            <ul class="dropdown-menu" *dropdownMenu>
                                                <li>
                                                    <a *ngIf="'Pages.ProductionPlan.Resume' | permission" href="javascript:;" (click)="llVisibleEv(car.id)">履历</a>
                                                </li>
                                                <li>
                                                    <a *ngIf="'Pages.ProductionPlan.Modify' | permission" href="javascript:;" (click)="editDetail(car)">修改</a>
                                                </li>
                                                <li>
                                                    <a *ngIf="'Pages.ProductionPlan.See' | permission" href="javascript:;" (click)="seeDetail(car)">查看</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td style="width: 60px">{{rowIndex+1}}</td>
                                    <td style="width: 210px">{{car.planNumber}}</td>
                                    <td style="width: 210px">{{car.jobNumber}}</td>
                                    <td style="width: 150px">{{car.model}}</td>
                                    <td style="width: 150px">{{car.lotNo}}</td>
                                    <td style="width: 150px">{{car.drawingNo}}</td>
                                    <td style="width: 150px">{{car.productName}}</td>
                                    <td style="width: 150px">{{car.preparationRemark}}</td>
                                    <td style="width: 150px">{{car.completionDate | date:'yyyy-MM-dd'}}</td>
                                    <td style="width: 80px">{{car.assignmentTypesDesc}}</td>
                                    <td style="width: 150px">{{car.organizationUnitDesc}}</td>
                                    <td style="width: 150px">{{car.userName}}</td>
                                    <td style="width: 150px">{{car.assignmentAuthor}}</td>
                                    <td style="width: 150px">{{car.assignmentTime}}</td>
                                    <td style="width: 150px">{{car.remark}}</td>
                                </tr>
                            </ng-template>
                        </p-table>
                        <div class="primeng-paging-container">
                            <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                [totalRecords]="primengTableHelper.totalRecordsCount"
                                (onPageChange)="getDescList($event)"
                                [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                            </p-paginator>
                            <span class="total-records-count">
                                {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 新增 修改 查看 弹窗 -->
    <p-dialog [style]="{width: '80%', height: '60%',background:'#fff'}" [(header)]="dialogType" [(visible)]="addVisible"
        (onHide)="displayclose()" modal="modal" [responsive]="true">
        <form *ngIf="actived" #addForm="ngForm" (ngSubmit)="addStandardDesc()" novalidate class="add-form"
            autocomplete="off">
            <div class="ui-g form-info">
                <div class="p-field ml ui-g-4">
                    <span class="input-lable" style="margin-right: 5px;">*型号：</span>
                    <p-dropdown name="model" #modelSelect="ngModel" [options]="modelList" [(ngModel)]="addInfoUi.model"
                        dataKey="value" [filter]="true" filterBy="label" optionLabel="label" placeholder="请选择" required
                        [disabled]="dialogType=='生产准备计划查看'" (onChange)="getLotNoList($event)">
                    </p-dropdown>
                    <!-- (onChange)="modelChangeEv($event.value)" -->
                    <validation-messages [formCtrl]="modelSelect"></validation-messages>

                </div>
                <div class="p-field ml ui-g-4">
                    <span class="input-lable" style="margin-right: 5px;">*发次：</span>
                    <p-dropdown name="lotNo" #lotNoSelect="ngModel" [options]="lotNoList" [(ngModel)]="addInfoUi.lotNo"
                        dataKey="value" [filter]="true" filterBy="label" optionLabel="label" placeholder="请选择" required
                        [disabled]="dialogType=='生产准备计划查看'" (onChange)="getDringNo($event)">
                    </p-dropdown>
                    <!-- (onChange)="addInfoUi.jobNumber=addInfoUi.model.label+'/'+addInfoUi.lotNo.label" -->
                    <validation-messages [formCtrl]="lotNoSelect"></validation-messages>

                </div>

                <div class="p-field ml ui-g-4">
                    <span class="input-lable" style="margin-right: 5px;">*产品图号：</span>
                    <input id="input" type="text" name="drawingNo" #drawingNoSelect="ngModel" pInputText
                        [(ngModel)]="addInfoUi.drawingNo" required [disabled]="dialogType=='生产准备计划查看'">
                    <validation-messages [formCtrl]="drawingNoSelect"></validation-messages>

                </div>
                <div class="p-field ml ui-g-4">
                    <span class="input-lable" style="margin-right: 5px;">*产品名称：</span>
                    <input id="input" type="text" name="productName" #productNameSelect="ngModel" pInputText
                        [(ngModel)]="addInfoUi.productName" required [disabled]="dialogType=='生产准备计划查看'">
                    <validation-messages [formCtrl]="productNameSelect"></validation-messages>

                </div>
                <div class="p-field ml ui-g-4">
                    <span class="input-lable" style="margin-right: 5px;">*计划完成日期：</span>
                    <p-calendar name="completionDate" #completionDateSelect="ngModel"
                        [(ngModel)]="addInfoUi.completionDate" required [disabled]="dialogType=='生产准备计划查看'">
                    </p-calendar>
                    <validation-messages [formCtrl]="completionDateSelect"></validation-messages>

                </div>
                <div class="p-field ml ui-g-4">
                    <span class="input-lable" style="margin-right: 5px;">*装配任务号：</span>
                    <input id="input" type="text" name="jobNumber" #jobNumberInput="ngModel" pInputText
                        [(ngModel)]="addInfoUi.jobNumber" required>
                    <validation-messages [formCtrl]="jobNumberInput"></validation-messages>

                </div>
                <div class="p-field ml ui-g-12">
                    <span class="input-lable" style="margin-right: 5px;">*准备内容：</span>
                    <textarea style="width: 70%;" rows="5" name="preparationRemark" #preparationRemarkInput="ngModel"
                        [(ngModel)]="addInfoUi.preparationRemark" pInputTextarea autoResize="autoResize"
                        [disabled]="dialogType=='生产准备计划查看'" required></textarea>
                    <validation-messages [formCtrl]="preparationRemarkInput"></validation-messages>
                </div>
                <div class="p-field ml ui-g-4">
                    <span class="input-lable" style="margin-right: 5px;">*负责班组：</span>
                    <p-multiSelect [panelStyle]="{width:'150px'}" name="organizationUnitId"
                        #organizationUnitIdSelect="ngModel" [options]="unitList" [disabled]="dialogType=='生产准备计划查看'"
                        (onChange)="unitChangeEv($event.value)" defaultLabel="请选择" required optionLabel="displayName"
                        dataKey="id" [(ngModel)]="addInfoUi.organizationUnitId">
                    </p-multiSelect>


                    <validation-messages [formCtrl]="organizationUnitIdSelect"></validation-messages>
                </div>

                <div class="p-field ml ui-g-4">
                    <span class="input-lable" style="margin-right: 5px;">*负责人：</span>
                    <p-multiSelect [panelStyle]="{width:'150px'}" name="userId" #userIdSelect="ngModel"
                        [options]="userList" [disabled]="dialogType=='生产准备计划查看'" defaultLabel="请选择" required
                        optionLabel="name" dataKey="id" [(ngModel)]="addInfoUi.userId">
                    </p-multiSelect>
                    <validation-messages [formCtrl]="userIdSelect"></validation-messages>

                </div>
                <div class="p-field ml ui-g-12">
                    <span class="input-lable" style="margin-right: 5px;">备注：</span>
                    <textarea style="width: 70%;" rows="5" name="remark" #remarkInput="ngModel"
                        [(ngModel)]="addInfoUi.remark" pInputTextarea autoResize="autoResize"
                        [disabled]="dialogType=='生产准备计划查看'" ></textarea>
                    <validation-messages [formCtrl]="remarkInput"></validation-messages>
                </div>
            </div>
            <div class="modal-footer" *ngIf="dialogType!='生产准备计划查看'">
                <button type="submit" class="btn btn-primary" [disabled]="!addForm.form.valid"
                    [buttonBusy]="savingAddDia" [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i>
                    <span>提交</span></button>
            </div>
        </form>
    </p-dialog>
    <!-- 履历弹窗 -->
    <p-dialog [style]="{width: '80%', height: '50%',background:'#fff'}" header="操作履历" [(visible)]="llVisible"
        (onHide)="displayclose()" modal="modal" [responsive]="true">
        <p-table [value]="logList" [paginator]="false">
            <ng-template pTemplate="header">
                <tr>
                    <th style="width: 150px">序号</th>
                    <th style="width: 150px">操作时间</th>
                    <th style="width: 150px">操作类型</th>
                    <th style="width: 150px">操作人</th>
                    <th style="width: 150px">操作详情</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowIndex="rowIndex" let-car>
                <tr>
                    <td style="width: 80px">{{rowIndex+1}}</td>
                    <td style="width: 150px">{{car.creationTime | date:'yyyy-MM-dd'}}</td>
                    <td style="width: 150px">{{car.operationTypeDesc}}</td>
                    <td style="width: 150px">{{car.userName}}</td>
                    <td style="width: 150px">{{car.businessTypeDesc}}</td>
                </tr>
            </ng-template>
        </p-table>


    </p-dialog>
    <!-- 生产准备任务引入 -->
    <p-dialog [style]="{width: '80%', height: '50%',background:'#fff'}" header="生产准备任务引入" [(visible)]="introduceVisible"
        (onHide)="displayclose()" modal="modal" [responsive]="true">
        <div>引入支持单选模式数据，如有多选默认选择选中的第一条数据的任务编号</div>
        <form #introduceVisibleForm="ngForm" (ngSubmit)="introducePlanEv()" novalidate class="add-form"
            autocomplete="off">
            <div class="ui-g form-info">
                <div class="p-field ml ui-g-4">
                    <span class="input-lable" style="margin-right: 5px;">*型号：</span>
                    <p-dropdown name="model" #modelSelect="ngModel" [options]="modelList" [(ngModel)]="addInfoUi.model"
                        dataKey="value" [filter]="true" filterBy="label" optionLabel="label" placeholder="请选择" required
                        (onChange)="getLotNoList($event)">
                    </p-dropdown>

                    <validation-messages [formCtrl]="modelSelect"></validation-messages>

                </div>
                <div class="p-field ml ui-g-4">
                    <span class="input-lable" style="margin-right: 5px;">*发次：</span>
                    <p-dropdown name="lotNo" #lotNoSelect="ngModel" [options]="lotNoList" [(ngModel)]="addInfoUi.lotNo"
                        dataKey="value" [filter]="true" filterBy="label" optionLabel="label" placeholder="请选择" required>
                    </p-dropdown>
                    <validation-messages [formCtrl]="lotNoSelect"></validation-messages>

                </div>
                <div class="p-field ml ui-g-4">
                    <span class="input-lable" style="margin-right: 5px;">*产品图号：</span>
                    <input id="input" type="text" name="drawingNo" #drawingNoSelect="ngModel" pInputText
                        [(ngModel)]="addInfoUi.drawingNo" required>
                    <validation-messages [formCtrl]="drawingNoSelect"></validation-messages>

                </div>
                <div class="p-field ml ui-g-4">
                    <span class="input-lable" style="margin-right: 5px;">*产品名称：</span>
                    <input id="input" type="text" name="productName" #productNameSelect="ngModel" pInputText
                        [(ngModel)]="addInfoUi.productName" required>
                    <validation-messages [formCtrl]="productNameSelect"></validation-messages>

                </div>

                <div class="p-field ml ui-g-12">
                    <span class="input-lable" style="margin-right: 5px;">*引入任务编号：</span>
                    <input id="input" type="text" name="jobNumber" #jobNumberInput="ngModel" pInputText
                        [(ngModel)]="addInfoUi.jobNumber" required>
                    <validation-messages [formCtrl]="jobNumberInput"></validation-messages>

                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary" [disabled]="!introduceVisibleForm.form.valid"
                    [buttonBusy]="savingAddDia" [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i>
                    <span>确定</span></button>
            </div>
        </form>


    </p-dialog>


</div>